<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* Page */

        html {
            box-sizing: border-box;
        }
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        html,
        body {
            height: 100%;
        }
        body {
            background: #fff;
            font-family: 'Roboto', sans-serif;
            line-height: 1.5em;
            color: #888;
        }
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            /* Main */

            overflow: hidden;
        }
        .main {
            height: 100%;
            position: relative;
            transition-property: transform;
        }
        .mask {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.3);
            pointer-events: none;
            opacity: 0;
            transition-property: opacity;
        }
        header {
            background-color: #3498db;
            background-image: -webkit-linear-gradient(to bottom, #3498db 0%, #217dbb 70%);
            background-image: linear-gradient(to bottom, #3498db 0%, #217dbb 100%);
            padding: 100px 50px;
            text-align: center;
        }
        header h1 {
            color: #fff;
            font-size: 3em;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        }
        .content {
            /* Sidebar */

            margin: 50px 50px;
        }
        .sidebar {
            position: fixed;
            z-index: 5;
            top: 0;
            left: 0;
            height: 100%;
            width: 260px;
            background: #1d2127;
            border-right: 3px solid #0f1114;
            overflow: hidden;
            -webkit-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);
            transition-property: transform;
        }
        .sidebar,
        .sidebar a {
            color: #abb4be;
        }
        .nav {
            margin-top: 100px;
        }
        .nav-items {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav-title {
            display: block;
            padding: 10px 50px;
            text-transform: uppercase;
            font-weight: 600;
            color: #465162;
        }
        .nav-link {
            display: block;
            padding: 10px 50px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        .nav-link:hover {
            background-color: #282d36;
        }
        .sidebar-separator {
            margin: 30px;
            height: 2px;
            background-color: #000;
            /* Hamburger Icon */

            border-bottom: 1px solid #2b313a;
        }
        .hamburger {
            display: block;
            position: fixed;
            left: 50px;
            top: 20px;
            cursor: pointer;
            z-index: 10;
            border-radius: 5px;
            background-color: #3498db;
            border: 2px solid #ddd;
            padding: 10px 7px;
            width: 50px;
            height: 46px;
            transition-property: background-color, border-color;
        }
        .bar {
            display: block;
            position: relative;
            background-color: #ddd;
            width: 100%;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            transition-property: transform, opacity, background-color, width;
        }
        .bar:first-child {
            top: 0;
        }
        .bar:nth-child(2) {
            opacity: 1;
        }
        .bar:last-child {
            bottom: 0;
        }
        .hamburger:hover {
            border-color: #fff;
        }
        .hamburger:hover .bar {
            background-color: #fff;
        }
        .bar + .bar {
            /* Animation */

            margin-top: 5px;
        }
        .main,
        .sidebar,
        .mask,
        .hamburger,
        .bar {
            transition-duration: 0.3s;
            /* Show Sidebar */

            transition-timing-function: ease-in-out;
        }
        .show-sidebar .main {
            -webkit-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);
        }
        .show-sidebar .sidebar {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        .show-sidebar .mask {
            opacity: 1;
            pointer-events: auto;
        }
        .show-sidebar .hamburger {
            background-color: #282d36;
            border-color: #0f1114;
        }
        .show-sidebar .bar {
            background-color: #abb4be;
        }
        .show-sidebar .bar:first-child {
            width: 120%;
            -webkit-transform: rotate(45deg) translate(5px, 8px);
            transform: rotate(45deg) translate(5px, 8px);
        }
        .show-sidebar .bar:nth-child(2) {
            opacity: 0;
        }
        .show-sidebar .bar:last-child {
            width: 120%;
            -webkit-transform: rotate(-45deg) translate(4px, -8px);
            transform: rotate(-45deg) translate(4px, -8px);
        }
    </style>
</head>
<body>
<div class="container">
    <main class="main" role="main">
        <div class="mask"></div>
        <header>
            <h1>Off-Canvas Menu</h1>
        </header>
        <section class="content">
            <p>Ullamcorper inceptos in magna vestibulum penatibus aliquet tellus suspendisse nascetur convallis a id diam netus a a parturient posuere nam orci fermentum duis habitasse nam. Iaculis eros hendrerit rhoncus et enim commodo nulla vivamus consequat
                id rhoncus vestibulum a maecenas justo vestibulum mi vel purus id ullamcorper mus a. Potenti mattis placerat ligula a suspendisse ipsum mus elementum a himenaeos et aliquam inceptos euismod ad placerat sociosqu mauris vestibulum conubia
                condimentum semper penatibus ridiculus. Dictumst diam eros fames a elementum eros mus fusce feugiat vestibulum a dui parturient ad ullamcorper suspendisse eleifend vestibulum facilisi ridiculus. Condimentum felis sed laoreet aliquam proin
                dignissim eu mi ad vestibulum ut suspendisse volutpat nibh cras mi praesent morbi ad. Est libero facilisis vestibulum suspendisse rutrum fames a facilisi semper interdum consectetur consectetur a scelerisque parturient volutpat ad eros
                torquent tincidunt senectus risus adipiscing donec parturient. Maecenas mus suspendisse laoreet non morbi vestibulum eros dolor nam nullam nec parturient nascetur suspendisse tincidunt suspendisse convallis blandit.</p>

            <p>Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque.
                Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper
                consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.</p>

            <p>Scelerisque condimentum pulvinar accumsan eget at nibh aliquet a maecenas lectus magnis per metus a mattis. Non ullamcorper dapibus in nostra a vitae scelerisque fusce ullamcorper lacinia cum magna vestibulum malesuada eros mus a phasellus
                a egestas pulvinar pretium aliquet. Adipiscing.</p>
        </section>
    </main>
    <aside class="sidebar">
        <nav class="nav">
            <ul class="nav-items">
                <li class="nav-title">Pages</li>
                <li><a href="#" class="nav-link">Home</a>
                </li>
                <li><a href="#" class="nav-link">Products</a>
                </li>
                <li><a href="#" class="nav-link">Services</a>
                </li>
                <li><a href="#" class="nav-link">About</a>
                </li>
                <li><a href="#" class="nav-link">News</a>
                </li>
            </ul>
            <div class="sidebar-separator"></div>
            <ul class="nav-items">
                <li class="nav-title">More</li>
                <li><a href="#" class="nav-link">Contact</a>
                </li>
                <li><a href="#" class="nav-link">Support</a>
                </li>
                <li><a href="#" class="nav-link">Careers</a>
                </li>
            </ul>
        </nav>
    </aside>
    <div class="hamburger">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</div>
</body>
</html>

<script>
    var container = document.querySelector('.container');

    function toggleSidebar() {
        container.classList.contains('show-sidebar') ? hideSidebar() : showSidebar();
    }

    function showSidebar() {
        container.classList.add('show-sidebar');
    }

    function hideSidebar() {
        container.classList.remove('show-sidebar');
    }

    document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false);
    document.querySelector('.mask').addEventListener('click', hideSidebar, false);
</script>